<template>
  <div ww3 auto>
    <div class="upload-top">
      <p>账户中满20个未提交审核的作品，上传将停止，提交审核后“开始”可继续</p>
      <p>上传作品后，请尽快完善作品信息，只有填写好信息的作品才会被审核</p>
      <p>
        请确保上传作品的原创性，发现搬运，将关闭店铺上传权限，并停止店铺所有作品交易
      </p>
    </div>
    <div class="tj-btn">
      <span @click="scrollToBottom">您有{{videoList.length}}作品待提交审核，去提交 》</span>
    </div>

    <el-card class="box-card">
      <div flex flex-c fz-16 space-be>
        上传视频、模板、压缩包
        <!-- <a href="" target="_blank" blue="" fz-14>BUZO网标识</a> -->
        
      </div>
      <el-divider></el-divider>

      <div class="flex flex-c" style="width: 100%; justify-content: center;" auto="">
        <el-upload
            style="margin-right: 20px"
          ref="videoUpload"
          :action="uploadUrl"
          :on-preview="handlePreview"
          :on-progress="handleProgress"
          :on-remove="handleRemove"
          multiple
          :limit="100"
          :on-change="onChange"
          :before-upload = "beforeUpload"
          :file-list="fileList"
          :on-success="handleSuccess"
          :show-file-list="false"
          :auto-upload="false">
          <el-button type="primary" style="width: 226px; height: 46px">
            视频素材
            <i class="el-icon-upload el-icon--right"></i>
          </el-button>
          <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
        </el-upload>
        

        <el-button type="primary" style="width: 226px; height: 46px; padding: 0" @click="openVisible2">
          模版/压缩包
          <i class="el-icon-upload el-icon--right"></i>
        </el-button>
      </div>

      <div
        auto
        flex
        style="margin-top: 30px"
        class="upload-list"
      >
        <span v-if="!videoFile.length">暂无任务</span>
        <ul v-else>
          <li v-for="x in videoFile">
            <div>
              <span>{{x.name}}</span>
              <span>{{(x.size/1048576).toFixed(2)}}M</span>
            </div>
            <el-progress :percentage="x.percentage" :color="customColor"></el-progress>
          </li>
        </ul>
      </div>

      <div ww1 flex style="justify-content: center; margin-top: 2%">
        <el-button type="primary" style="padding: 1% 6% !important; font-size: 14px" @click="sumbitSave">开始</el-button>
      </div>
    </el-card>

    <div class="result-content">
      <div class="result-item s-item" v-for="x in tempLen" :key="x">
        <div><i class="el-icon-more"></i></div>
        <div>视频转码中</div>
        <div>请稍等...</div>
      </div>

      <div class="result-item" v-for="(item, index) in videoList" :key="index" @click="editFun(item)">
        <div class="res-i-img">
          <img :src="fileUrl + item.filesImg1" alt="">
        </div>
        <div class="bg"></div>
        <div class="btn-wrapper">
          <span>点击编辑提交审核</span>
        </div>
      </div>
      
    </div>

    <el-dialog
      title="添加模板/压缩包"
      :visible.sync="dialogFormVisible2"
      class="show"
      width="40%"
    >
      <div
        ww1
        flex
        clum
        flex-c
        style="height: 200px; justify-content: space-around"
      >
        <p fz-14 ww1>
          请上传与模板分辨率一致的预览视频，且保证预览视频中素材无侵权情况
        </p>
        <p fz-14 ww1>不建议使用百度搜索的图片等相关素材</p>

        <div flex class="btns">
          <el-upload
              style="margin-right: 20px"
              ref="videoPrevUpload"
              :action="uploadUrl"
              :on-success="prevSuccess"
              :on-change="prevChange"
              :show-file-list="false"
              :auto-upload="false">
            <el-button type="primary" plain style="padding: 12px 30px !important">
              <span class="etext-name">
              {{materialData.temp.prevFile.name || '预览视频'}}
              </span>
              <i class="el-icon-upload el-icon--right"></i>
            </el-button>
            <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
          </el-upload>


          <el-upload
              style="margin-right: 20px"
              ref="videoPackUpload"
              :action="uploadUrl"
              :on-change="fileChange"
              :on-success="packSuccess"
              :show-file-list="false"
              :auto-upload="false">
            <el-button type="primary" plain style="padding: 12px 30px !important">
              <span class="etext-name">
              {{materialData.temp.file.name || '工程文件压缩包'}}
              </span>
              <i class="el-icon-upload el-icon--right"></i>
            </el-button>
          </el-upload>
        </div>

        <div>
          <el-button type="primary" :disabled="!materialData.temp.file.name || !materialData.temp.prevFile.name" @click="sendDaterialData" style="padding: 12px 70px !important">提交</el-button
          >
        </div>
      </div>
    </el-dialog>
    <editPro ref="editPro" @sure="getMyVideoList"/>
  </div>
</template>

<script>
import editPro from "./EditPro.vue"
import $http from "@/api/info/videoUpload"
import $httpLogin from "@/api/login/login"
export default {
  name: "Upload",
  data() {
    return {
      materialData: {
        "type": 2,
        "userId": '',
        "fileName": "",
        "categoryIds": '',
        "fileSize": "",
        "fileUrl": "",
        "filePackage": "",
        temp: {
          file: '',
          prevFile: ''
        }
      },
      fileUrl: this.$url.fileUrl,
      uploadUrl: this.$url.uploadUrl,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      fileList: [],
      videoFile: [],
      percentage: 0,
      tempLen: 0,
      customColor: '#409eff',
      videoList: [],
      cmsAuthentication: {}
    };
  },
  components: {
    editPro
  },
  mounted() {
    this.getMyVideoList();
    this.getUserInfo();
  },
  methods: {
    /**
     * 获取用户信息
     */
    getUserInfo() {
      let that = this;
      let data = {
        phone: sessionStorage.getItem('userId')
      };
      $httpLogin.getUserInfo(data).then(res => {
        that.cmsAuthentication = res.data.cmsAuthentication == null ? {} : res.data.cmsAuthentication;
      })
    },
    openVisible2() {
      this.materialData = {
        "type": 2,
        "userId": '',
        "fileName": "",
        "categoryIds": '',
        "fileSize": "",
        "fileUrl": "",
        "filePackage": "",
        temp: {
          prevFile: '',
          file: '',
        }
      }
      this.dialogFormVisible2 = true
    },
    sendDaterialData() {
      this.videoFile.push({
        name: `${this.materialData.temp.prevFile.name}(${this.materialData.temp.file.name})`,
        size: (this.materialData.temp.prevFile.size + this.materialData.temp.file.size),
        percentage: 0,
        type: 2,
        success: 0,
        prevFile: this.materialData.temp.prevFile,
        file: this.materialData.temp.file
      })

      this.dialogFormVisible2 = false
    },
    /**
     * 提交编辑
     */
    editFun(data) {
      this.$refs.editPro.showFun(data.videoId);
    },
    /**
     * 获取待提交视频列表
     */
    getMyVideoList() {
      let that = this;
      let data = {
        userId: sessionStorage.getItem("userId")
      }
      $http.getMyVideoList(data).then(res => {
        that.videoList = res.data;
        console.log(that.videoList);
      })
    },
    scrollToBottom() {
      window.scrollTo(0, 600);
    },
    handlePreview(file, fileList) {
      console.log("handlePreview",file, fileList);
    },
    handleProgress(file, fileList) {
      console.log("handleProgress",file, fileList);
      console.log("handleProgress",file.percentage);
      fileList.percentage = Number(((file.loaded/file.total)*100).toFixed(0));
      console.log(this.videoFile)
    },
    handleRemove() {

    },
    beforeUpload(file, fileList) {
      console.log("beforeUpload",file, fileList);
    },
    prevSuccess(res, file) {
      let fileName = res.fileName;
      this.materialData.fileUrl = res.fileName
    },
    packSuccess(res, file) {
      let fileName = res.fileName;
      this.materialData.filePackage = res.fileName
      this.materialData.fileSize = (file.size/1048576).toFixed(2) + "MB"
      this.materialData.fileName = file.name
    },

    handleSuccess(res, file) {
      let data = {
          "type": 1,
          "userId": sessionStorage.getItem('userId'),
          "fileName": file.name,
          "categoryIds": 25,
          "fileSize": (file.size/1048576).toFixed(2) + "MB",
          "fileListUrl": [
              {
                  "fileUrl": res.fileName
              }
          ]
      }
      this.tempLen++
      $http.saveVideoMaterial(data).then(res => {
        this.tempLen--
        this.getMyVideoList();
      })
    },
    onChange(file) {
      if(file.status === "ready") {
        const name = file.name.slice(file.name.lastIndexOf('.') + 1),
            size = file.size / 1024 / 1024

        if(name !== 'mp4' && name!== 'avi' && name !== 'mov') {
          let uploadFiles = this.$refs['videoUpload'].uploadFiles;
          let index = uploadFiles.indexOf(file);
          uploadFiles.splice(index,1);
          return this.$message.error('文件格式支持mp4、avi、mov')
        }
        if(size < 5 && size > 1024) {
          let uploadFiles = this.$refs['videoUpload'].uploadFiles;
          let index = uploadFiles.indexOf(file);
          uploadFiles.splice(index,1);
          return this.$message.error('文件大小支持5-1024M')
        }

        this.videoFile.push(file)
      }
    },
    prevChange(file) {
      if(file.status === "ready") {
        const name = file.name.slice(file.name.lastIndexOf('.') + 1),
            size = file.size / 1024 / 1024

        if(name !== 'mp4' && name!== 'avi' && name !== 'mov') {
          let uploadFiles = this.$refs['videoPrevUpload'].uploadFiles;
          let index = uploadFiles.indexOf(file);
          uploadFiles.splice(index,1);
          return this.$message.error('文件格式支持mp4、avi、mov')
        }
        if(size < 5 && size > 1024) {
          let uploadFiles = this.$refs['videoPrevUpload'].uploadFiles;
          let index = uploadFiles.indexOf(file);
          uploadFiles.splice(index,1);
          return this.$message.error('文件大小支持5-1024M')
        }

        this.materialData.temp.prevFile = file;
      }
    },
    fileChange(file) {
      if(file.status === "ready") {
        const name = file.name.slice(file.name.lastIndexOf('.') + 1),
            size = file.size / 1024 / 1024

        if(name !== 'rar' && name!== 'zip') {
          let uploadFiles = this.$refs['videoPackUpload'].uploadFiles;
          let index = uploadFiles.indexOf(file);
          uploadFiles.splice(index,1);
          return this.$message.error('文件格式支持rar、zip')
        }
        if(size < 5 && size > 1024) {
          let uploadFiles = this.$refs['videoPackUpload'].uploadFiles;
          let index = uploadFiles.indexOf(file);
          uploadFiles.splice(index,1);
          return this.$message.error('文件大小支持5-1024M')
        }

        this.materialData.temp.file = file;
      }
    },
    /**
     * 点击提交事件
     */
    sumbitSave() {
      // debugger
      // console.log(this.videoFile)

      if(!this.cmsAuthentication.type) {
        this.$message.error('请认证后再进行视频上传！')
      }

      this.videoFile.forEach(v => {
        if(v.type == 2 && !v.success) {
          Promise.all([
            $http.uploadFile({file: v.file.raw}),
            $http.uploadFile({file: v.prevFile.raw}),
          ]).then(res => {
            v.percentage = 100

            let data = {
              "type": 2,
              "userId": sessionStorage.getItem('userId'),
              "fileName": v.file.name,
              "categoryIds": 37,
              "fileSize": (v.file.size/1048576).toFixed(2) + "MB",
              "fileUrl": res[1].fileName,
              "filePackage": res[0].fileName
            }
            this.tempLen++
            $http.saveTemplateMaterial(data).then(res => {
              v.success = true
              this.tempLen--
              this.getMyVideoList();
            })


          })
        }
      })
       this.$refs.videoUpload.submit();
    },
  }
};
</script>

<style scoped lang="scss">
.btn-wrapper {
  /* position: absolute;
  bottom: 0;
  left: 0;
  height: 30px;
  line-height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  width: 100%;
  font-size: 14px;
  text-align: center; */
  border-radius: 4px;
  overflow: hidden;
  box-shadow: rgba(18, 35, 75,.15) 0px 0px 16px 0px;
  transition: transform 0.5s ease 0s, box-shadow 0.5s ease 0s;
  position: absolute;
  cursor: pointer;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  color: #fff;
  text-align: center;
  height: 30px;
  line-height: 30px;
}
.bg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}
.result-item:hover .btn-wrapper {
  transform: translate3d(0px, -70px, 0px);
  background-color: rgba(0, 0, 0, 0);
}

.result-item:hover .bg {
  display: block;
}



.tj-btn {
  margin-bottom: 10px;
  text-align: center;
}
.tj-btn span {
  display: inline-block;
  padding: 8px 14px;
  background: #4da4d7;
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
}
.upload-list {
  flex-direction: column;
  align-items: center;
  height: 30vh;
}
.upload-list ul {
  width: 100%;
}
.upload-list ul div {
  margin-bottom: 5px;
}
.upload-list ul div span:last-child {
  float: right;
  margin-right: 20px;
}
.upload-list ul li {
  cursor: pointer;
  padding: 10px;
}
.upload-list ul li:hover {
  background: #f0f0f0;
}
.upload-demo {
  width: 145px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  border-radius: 3px;
  margin-right: 20px;
}
.upload-demo >>> .el-upload,
.upload-demo >>> .el-button {
  width: 100%;
  height: 100%;
}
.upload-top {
  padding-bottom: 35px;
  padding-left: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.upload-top p {
  padding-bottom: 10px;
  font-size: 14px;
}
.box-card >>> .el-button--primary.is-plain,
.btns >>> .el-button--primary.is-plain {
  color: #fff !important;
}

/deep/{
  .el-button--primary.is-plain{
    color: #fff !important;
  }
 }
.box-card >>> .el-button--primary {
  padding: 2% 5% !important;
}
.card-cont {
  min-height: 20vh;
  width: 70%;
  margin-top: 2%;
}
/* 视频列表部分 */
.result-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  cursor: pointer;
  margin-top: 16px;
}
.result-content .result-item{
  width: 285px;
  height: 160px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 14px;
  position: relative;
  cursor: pointer;
  box-shadow: rgba(18, 35, 75,.15) 0px 0px 16px 0px;
  margin-right: 20px;
  &:nth-child(4n) {
    margin-right: 0;
  }
}
.result-content .result-item .res-i-img{
  width: 285px;
  height: 160px;
  overflow: hidden;
  border-radius: 3px;
}
.result-item .res-i-img img {
  width: 100%;
  vertical-align: middle;
}
.result-item .item-msg{
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 285px;
  box-sizing: border-box;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--small);
  color: #f4f3f3;
}

.result-content{
  .s-item{
    cursor: default;
    display: block;
    & > div{
      &:nth-child(1){
        text-align: center;
        padding-top: 22px;
        i{
          width: 46px;
          height: 46px;
          line-height: 46px;
          color: #fff;
          text-align: center;
          background: #44a0d5;
          border-radius: 50%;
          font-size: 22px;
        }
      }
      &:nth-child(2){
        text-align: center;
        margin-top: 17px;
        margin-bottom: 12px;
      }
      &:nth-child(3){
        text-align: center;
        color: #aaa;
        font-size: 14px;
      }
    }
  }
}

.item-mediu{
  position: absolute;
  top: 0;
  left: 0;
  width: 285px;
}
.etext-name{
  display: inline-block;
  max-width: 160px;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
</style>
